<template>
    <div class="homework-list">
        <div class="main-title">
            <img class="icon" src="@/assets/images/homework-icon.png" alt="">
            <span>作业</span>
        </div>
        <ul class="work-list" v-if="homeworkList.length">
            <li class="w-item" v-for="(item) in homeworkList" :key="item.homeWorkId" @click="homeworkDetail(item)">
                <img src="@/assets/images/edit-icon.png" alt="" class="edit-icon">
                <div class="content">
                    <p class="title">{{item.name}}</p>
                    <div class="info" v-if="isBuy">
                        <p>
                            <span class="must" v-if="item.compulsory == 1">必答</span>
                            <span class="count" v-if="item.times !== -1">还可以提交{{item.times - (item.answerTimes || 0)}}次</span>
                        </p>
                        <span class="status" :class="{complete:item.isDone == 1}">{{item.isDone != 1 ? '未提交' : '已提交'}}</span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="no-data" v-else>
            <empty :image="require('@/assets/images/empty/no-homework.png')" addTip="暂无布置作业" :size="[260, 160]"/>
        </div>
    </div>
</template>

<script setup>
import { defineComponent, toRefs,ref, reactive, toRef, computed, onMounted } from "vue"
import Empty from '@/components/empty.vue'
import {useRoute} from 'vue-router';

const emit = defineEmits(['view-homework'])
const route = useRoute();
const props = defineProps({
    data: {
        default: () => [],
        type: Array
    },
    // 是否报名
    isBuy: {
        default: false,
        type: Boolean
    }
})

let homeworkList = ref([])
// 获取作业列表
function getHomeList () {
    // if (!route.params.moocId) {
    //     return false;
    // }
    G_transmit('moocHomeWorkList', {
        queries: {
            moocId: route.params.moocId
        }
    }).then((res) => {
        homeworkList.value = res.data || [];
        console.log(homeworkList)
    })
}
function homeworkDetail(item){
    emit('view-homework', item)
}
onMounted(() => {
    getHomeList()
})
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
 .homework-list{
    padding: 20px 15px;
    box-sizing: border-box;
    .main-title{
        font-size: 16px;
        font-weight: 600;
        color: #171A1D;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .icon{
            width:16px;
            height:16px;
            margin-right: 4px;
        }
    }
    .work-list{
        width:100%;
        margin-top: 15px;
        .w-item{
            box-shadow: 0px 3px 6px 0px rgba(140,149,179,0.08);
            border-radius: 8px;
            border: 1px solid #EFF0F2;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            .edit-icon{
                width:18px;
                height:18px;
                margin-right: 8px;
                margin-top: 4px;
            }
            .content{
                width:100%;
            }
            .title{
                font-size: 15px;
                font-weight: 500;
                color: #171A1D;
                line-height: 24px;
                word-break: break-all;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
                overflow: hidden;
            }
            .info{
                margin-top: 5px;
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                width:100%;
                .must{
                    border-radius: 2px;
                    border: 1px solid #FFB4A2;
                    font-size: 12px;
                    font-weight: 400;
                    color: #FF4719;
                    line-height: 18px;
                    padding: 1px 4px;
                    margin-right: 10px;

                }
                .count{
                    font-size: 13px;
                    font-weight: 400;
                    color: #A2A3A4;
                    line-height: 22px;
                }
                .status{
                    font-size: 13px;
                    font-weight: 600;
                    color: #FF9201;
                    line-height: 20px;
                }
                .complete{
                    color: #6E7074;
                }
            }
        }
        .w-item:last-child{
            margin-bottom: 0;
        }
    }
    .no-data{

    }
 }
 
</style>
